<template>
  <div class="workReportRecord">
    <div class="workReportRecord-header">
      <div class="workReportRecord-header-btn">
        <el-button size="mini">导出</el-button>
      </div>
      <div class="workReportRecord-header-info">
        <div class="workReportRecord-header-info-item">
          <span>报工总量：</span>
          <span>{{data?data.quantityFeedbackTotal:0}}</span>
        </div>
        <div class="workReportRecord-header-info-item">
          <span>合格：</span>
          <span>{{data?data.quantityQualifiedTotal:0}}</span>
        </div>
        <div class="workReportRecord-header-info-item">
          <span>不合格：</span>
          <span>{{data?data.quantityUnqualifiedTotal:0}}</span>
        </div>
        <div class="workReportRecord-header-info-item">
          <span>合格率：</span>
          <span>{{data?data.qualifiedRateTotal+'%':0+'%'}}</span>
        </div>
      </div>
    </div>
    <el-table :data="data?data.proFeedbackVOList:null" border style="width: 100%" height="300px" size="small">
      <el-table-column label="报工类型" align="center" prop="feedbackType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mes_feedback_type" :value="scope.row.feedbackType"/>
        </template>
      </el-table-column>
      <el-table-column label="工作站" show-overflow-tooltip align="center" prop="workstationName" />
      <el-table-column label="生产工单编号" show-overflow-tooltip align="center" width="120" prop="feedbackCode" />
      <el-table-column label="产品物料编码" show-overflow-tooltip align="center" width="120" prop="itemCode" />
      <el-table-column label="产品物料名称" show-overflow-tooltip align="center" width="120" prop="itemName" />
      <el-table-column label="规格型号" show-overflow-tooltip align="center" prop="specification" />
      <el-table-column label="报工数量" show-overflow-tooltip align="center" prop="quantityFeedback" />   
      <el-table-column label="报工人" show-overflow-tooltip align="center" prop="fbNickName" />
      <el-table-column label="合格品数量" show-overflow-tooltip align="center" width="100" prop="quantityQualified" />
      <el-table-column label="不合格数量" show-overflow-tooltip align="center" width="100" prop="quantityUnquanlified" />
      <el-table-column label="待检测数量" show-overflow-tooltip align="center" width="100" prop="quantityUncheck" />
      <!-- <el-table-column label="报工数量" show-overflow-tooltip align="center" prop="quantityFeedback" /> -->
      <el-table-column label="返工数量" show-overflow-tooltip align="center" prop="quantityRework" />
      <el-table-column label="有效工时" show-overflow-tooltip align="center" prop="effectiveHour" />
      <el-table-column label="报工时间" show-overflow-tooltip align="center" prop="feedbackTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.feedbackTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="质检日期" show-overflow-tooltip align="center" prop="inspectDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.inspectDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合格" show-overflow-tooltip align="center" prop="quantityQualified" />
      <el-table-column label="不合格" show-overflow-tooltip align="center" prop="quantityUnquanlified" />
      <el-table-column label="合格率" show-overflow-tooltip align="center" prop="qualifiedRate" />
      <el-table-column label="审核人" show-overflow-tooltip align="center" prop="recordNick" />
      <el-table-column label="状态" show-overflow-tooltip align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.mes_order_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          <el-button type="text" size="mini" @click="handleSee(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <pagination 
      v-show="total>0" 
      :total="total" 
      :page.sync="queryParams.pageNum" 
      :limit.sync="queryParams.pageSize" 
      @pagination="getList"
    /> -->

    <el-dialog title="查看报工记录" :visible.sync="dialogVisible" width="700px" append-to-body>
      <el-form ref="form" :model="form"  label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="报工类型" prop="feedbackType">
              <el-select v-model="form.feedbackType" disabled>
                <el-option 
                  v-for="dict in dict.type.mes_feedback_type" 
                  :key="dict.value" 
                  :label="dict.label" 
                  :value="dict.value" 
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作站" prop="workstationName">
              <el-input v-model="form.workstationName" disabled  />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产工单编号" prop="workorderCode">
              <el-input v-model="form.workorderCode" disabled  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品物料编码" prop="itemCode">
              <el-input v-model="form.itemCode" disabled  />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品物料名称" prop="itemName">
              <el-input v-model="form.itemName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格型号" prop="specification">
              <el-input v-model="form.specification" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="报工数量" prop="quantityFeedback">
              <el-input v-model="form.quantityFeedback" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报工人" prop="nickName">
              <el-input v-model="form.nickName" disabled  />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="合格品数量" prop="quantityQualified">
              <el-input v-model="form.quantityQualified" disabled  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不良品数量" prop="quantityUnquanlified">
              <el-input v-model="form.quantityUnquanlified" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="待检测数量" prop="quantityUncheck">
              <el-input v-model="form.quantityUncheck" disabled  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="返工数量" prop="quantityRework">
              <el-input v-model="form.quantityRework" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listFeedback, getFeedback, delFeedback, addFeedback, updateFeedback, execute } from "@/api/mes/pro/feedback";
export default {
  name: 'workReportRecord',
  dicts:[ 'mes_feedback_type', 'mes_order_status' ],
  props: {
    data: undefined,
  },
  data() {
    return {
      total: 0,
      queryParams:{
        pageNum: 1,
        pageSize: 10
      },
      tableData:[],
      dialogVisible: false,
      form: {},
      feedbackType:''
    }
  },
  mounted() {
    // this.getList()
    console.log(this.data, '>>>', this.dict.type.mes_feedback_type, '^^^^', this.workorderId);
  },
  methods: {
    // getList(){
    //   workReportRecord(this.workorderId).then(response => {
    //     this.tableData = response.rows
    //     this.total = response.total
    //     console.log('???',response);
    //   })
    // },
    handleDelete(row){
      this.$confirm('确定删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delFeedback(row.recordId).then(response => {
          this.$modal.msgSuccess("删除成功");
          // this.getList();
          this.$emit('handleClick', {name: '5'})
        })
        console.log(row);
      })
    },
    handleSee(row){
      this.dialogVisible = true
      this.form = {...row}
      console.log(row);
    },
  }
}
</script>

<style lang="scss" scoped>
.workReportRecord{
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    // padding: 0 20px;
    &-btn {
      display: flex;
    }
    &-info {
      display: flex;
      justify-content: space-between;
      &-item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>